<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

import { ElIcon } from 'element-plus';

const props = defineProps({
  availableComponents: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(['dragStart']);

const handleDragStart = (event: DragEvent, component: any) => {
  emit('dragStart', event, component);
};
</script>

<template>
  <div
    class="component-panel mb-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm"
  >
    <div class="mb-3">
      <h3 class="text-lg font-semibold text-gray-800">组件库</h3>
      <p class="mt-1 text-xs text-gray-500">
        拖拽组件到下方画布，支持24栅格布局和响应式缩放
      </p>
      <p class="text-xs text-orange-500">
        💡 删除组件：点击组件右上角红色删除按钮，或选中组件后按Delete键
      </p>
      <p class="text-xs text-blue-500">
        💾 修改会在退出设计模式时自动恢复，需要点击"保存布局"才会永久保存
      </p>
    </div>
    <div class="component-list flex flex-wrap gap-3">
      <div
        v-for="component in availableComponents"
        :key="component.type"
        class="component-item flex-shrink-0 cursor-move rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-3 transition-all hover:border-blue-400 hover:bg-blue-50 hover:shadow-md"
        style="width: 160px"
        draggable="true"
        @dragstart="handleDragStart($event, component)"
      >
        <div class="mb-2 flex items-center space-x-2">
          <div class="flex h-6 w-6 items-center justify-center rounded bg-blue-100">
            <span class="text-xs font-bold text-blue-600">{{
              component.name.charAt(0)
            }}</span>
          </div>
          <span class="text-sm font-medium">{{ component.name }}</span>
        </div>
        <div class="mb-1 text-xs text-gray-500">
          {{ component.description }}
        </div>
        <div class="text-xs text-blue-600">
          默认: {{ component.defaultGridWidth }}×{{ component.defaultGridHeight }} 栅格
        </div>
        <div class="text-xs text-orange-600">
          最小: {{ component.minGridWidth }}×{{ component.minGridHeight }} 栅格
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.component-item {
  user-select: none;
}

.component-item:active {
  transform: scale(0.98);
}
</style>